<template>
    <a-form :model="formParams" ref="formParamsRef" style="max-width: 600px" auto-label-width="auto" :rules="rules">
        <!-- <a-form-item field="avatar" label="头像：">
            <ComUpload @imgUrl="formParams.avatar = $event" ref="comUploadRef">
                <img :src="formParams.avatar" class="upload-img">
            </ComUpload>
        </a-form-item> -->
        <a-form-item field="name" label="名称：">
            <a-input v-model.trim="formParams.name" placeholder="名称" :max-length="20" show-word-limit ref="nameRef"></a-input>
        </a-form-item>
        <a-form-item field="userIds" label="成员：" class="last-item">
            <div class="user-list">
                <a-select v-model="formParams.userIds"
                          placeholder="请选择会话成员" multiple
                          :fallback-option="fallback"
                          class="user-select">
                    <template #label="{ data }">
                        <ComAvatar :size="26"
                                   :sex="userList.find(item => item.id === data.value)?.sex"
                                   :keys="userList.find(item => item.id === data.value)?.initialLetter" />
                    </template>
                    <a-option v-for="item in userList" :key="item.id" :value="item.id" class="user-options" :disabled="item.id === loginId()">
                        <ComAvatar :size="26" :sex="item.sex" :keys="item.initialLetter" class="avatar"/>
                        {{ item.nickname }} ({{ item.email }})
                    </a-option>
                </a-select>
                <!-- <ComSelect v-model:checked="formParams.userIds" :list="userList" :isDisabled="true"></ComSelect> -->
                <i class="EachApp EachApp_sousuo1 search" @click="handleChoose"></i>
            </div>
        </a-form-item>
	</a-form>
    <!-- 新增对话 -->
    <ComModal v-model:visible="modalVisible" title="选择成员" @handleCancel="myComponentRef.handleCancel()" @handleSubmit="myComponentRef?.handleSubmit()" :disabled="!myComponentRef?.userCheckedNew.length">
        <component :is="myComponent" ref="myComponentRef" v-bind="$attrs" :userList="userList" :userChecked="formParams.userIds" @handleClose="modalVisible = false" @handleSubmit="formParams.userIds = $event"></component>
    </ComModal>
</template>
<script lang="ts" setup>
const props = defineProps({
    userList: { type: Array, default: () => { return [] } }
})
import * as ApiMsg from '@/api/msg';
import { loginId } from '@/utils/login';

const ChooseUser = defineAsyncComponent(() => import('./ChooseUser.vue'));
const emit = defineEmits(['handleClose']);
const modalVisible = ref(false);
const myComponent = ref(null);
const myComponentRef = ref(null);
const searchKey = ref(''); // 关键字
const comUploadRef = ref(null);
const nameRef = ref(null);
const formParamsRef = ref(null);
const formParams = ref({
    avatar: '', // 头像
    name: '', // 群聊名称
    userIds: [loginId()], // 群聊成员
});
onMounted(() => {
    // if(loginId() === 6){
    //     formParams.value.userIds.push(7)
    // }
    nameRef.value.focus();
})
const rules = reactive({
	name: [{ required: true, message: '请输入会话名称', trigger: 'blur' }],
})

// 选择成员
const handleChoose = () => {
    myComponent.value = ChooseUser;
    modalVisible.value = true;
}

// 提交-添加
const handleSubmit = async () => {
    const valid = await formParamsRef.value.validate();
    if (valid) return;
    try{
        const params = {
            ...formParams.value,
            // appCode: '',
            // appName: '',
            // appBizCode: '',
            // appBizId: '',
            // iframeUrl: '',
            // fromData: '',
        }
        const res = await ApiMsg.ApiChatAdd(params);
        const items = {
            sendId: loginId(),
            name: formParams.value.name,
            topicId: res
        }
        emit('handleClose', items);
        formParams.value.name = '';
    }catch(err){console.log(err);}
}

defineExpose({
    handleSubmit,
    formParams,
    formParamsRef,
    comUploadRef
})
</script>
<style lang="scss">
.user-options{
    .avatar{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .arco-checkbox-label{
        display: flex;
        align-items: center;
    }
}
</style>
<style lang="scss" scoped>
.user-list{
    width: 100%;
    position: relative;
    .search{
        position: absolute;
        right: 10px;
        top: 5px;
        color: #999;
        cursor: pointer;
    }
    .avatar{
        width: 22px;
        height: 22px;
        border-radius: 50%;
        margin-right: 10px;
    }
    :deep(.user-select){
        .arco-select-view-suffix{
            display: none;
        }
    }
}
</style>